<template>
  <a-skeleton active :loading="loading" :paragraph="{ rows: 17 }">
    <a-card :bordered="false">
      <a-alert type="info" :showIcon="true">
        <div slot="message">
          上次更新时间：{{ this.time }}
          <a-divider type="vertical" />
          <a @click="handleClickUpdate">立即更新</a>
        </div>
      </a-alert>

      <a-table
        rowKey="id"
        size="middle"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="tableLoading"
        style="margin-top: 20px"
      >
        <template slot="param" slot-scope="text, record">
          <a-tag :color="textInfo[record.param].color">{{ text }}</a-tag>
        </template>

        <template slot="text" slot-scope="text, record">
          {{ textInfo[record.param].text }}
        </template>

        <template slot="value" slot-scope="text, record"> {{ text }} {{ textInfo[record.param].unit }} </template>
      </a-table>
    </a-card>
  </a-skeleton>
</template>
<script>
import moment from 'moment'
import { getAction } from '@/api/manage'

moment.locale('zh-cn')

export default {
  props: {
    nodeUrl: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      time: '',
      loading: true,
      tableLoading: true,
      columns: [{
        title: '参数',
        width: '30%',
        dataIndex: 'param',
        scopedSlots: { customRender: 'param' }
      }, {
        title: '描述',
        width: '40%',
        dataIndex: 'text',
        scopedSlots: { customRender: 'text' }
      }, {
        title: '当前值',
        width: '30%',
        dataIndex: 'value',
        scopedSlots: { customRender: 'value' }
      }],
      dataSource: [],
      // 列表通过 textInfo 渲染出颜色、描述和单位
      textInfo: {
        'jvm.memory.max': { color: 'purple', text: 'JVM 最大内存', unit: 'MB' },
        'jvm.memory.committed': { color: 'purple', text: 'JVM 可用内存', unit: 'MB' },
        'jvm.memory.used': { color: 'purple', text: 'JVM 已用内存', unit: 'MB' },
        'jvm.buffer.memory.used': { color: 'cyan', text: 'JVM 缓冲区已用内存', unit: 'MB' },
        'jvm.buffer.count': { color: 'cyan', text: '当前缓冲区数量', unit: '个' },
        'jvm.threads.daemon': { color: 'green', text: 'JVM 守护线程数量', unit: '个' },
        'jvm.threads.live': { color: 'green', text: 'JVM 当前活跃线程数量', unit: '个' },
        'jvm.threads.peak': { color: 'green', text: 'JVM 峰值线程数量', unit: '个' },
        'jvm.classes.loaded': { color: 'orange', text: 'JVM 已加载 Class 数量', unit: '个' },
        'jvm.classes.unloaded': { color: 'orange', text: 'JVM 未加载 Class 数量', unit: '个' },
        'jvm.gc.memory.allocated': { color: 'pink', text: 'GC 时, 年轻代分配的内存空间', unit: 'MB' },
        'jvm.gc.memory.promoted': { color: 'pink', text: 'GC 时, 老年代分配的内存空间', unit: 'MB' },
        'jvm.gc.max.data.size': { color: 'pink', text: 'GC 时, 老年代的最大内存空间', unit: 'MB' },
        'jvm.gc.live.data.size': { color: 'pink', text: 'FullGC 时, 老年代的内存空间', unit: 'MB' },
        'jvm.gc.pause.count': { color: 'blue', text: '系统启动以来GC 次数', unit: '次' },
        'jvm.gc.pause.totalTime': { color: 'blue', text: '系统启动以来GC 总耗时', unit: '秒' }
      },
      // 当一条记录中需要取出多条数据的时候需要配置该字段
      moreInfo: {
        'jvm.gc.pause': ['.count', '.totalTime']
      }
    }
  },
  mounted () {
    this.loadTomcatInfo()
  },
  methods: {

    handleClickUpdate () {
      this.loadTomcatInfo()
    },

    loadTomcatInfo () {
      this.tableLoading = true
      this.time = moment().format('YYYY年MM月DD日 HH时mm分ss秒')
      Promise.all([
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.memory.max'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.memory.committed'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.memory.used'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.buffer.memory.used'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.buffer.count'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.threads.daemon'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.threads.live'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.threads.peak'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.classes.loaded'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.classes.unloaded'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.gc.memory.allocated'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.gc.memory.promoted'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.gc.max.data.size'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.gc.live.data.size'),
        getAction('http://' + this.nodeUrl + '/actuator/metrics/jvm.gc.pause')
      ]).then((res) => {
        const info = []
        res.forEach((value, id) => {
          let more = this.moreInfo[value.name]
          if (!(more instanceof Array)) {
            more = ['']
          }
          more.forEach((item, idx) => {
            const param = value.name + item
            let val = value.measurements[idx].value

            if (param === 'jvm.memory.max' ||
              param === 'jvm.memory.committed' ||
              param === 'jvm.memory.used' ||
              param === 'jvm.buffer.memory.used' ||
              param === 'jvm.gc.memory.allocated' ||
              param === 'jvm.gc.memory.promoted' ||
              param === 'jvm.gc.max.data.size' ||
              param === 'jvm.gc.live.data.size'
            ) {
              val = this.convert(val, Number)
            }
            info.push({ id: param + id, param, text: 'false value', value: val })
          })
        })
        this.dataSource = info
      }).catch((e) => {
        this.$message.error('获取JVM信息失败')
      }).finally(() => {
        this.loading = false
        this.tableLoading = false
      })
    },

    convert (value, type) {
      if (type === Number) {
        return Number(value / 1048576).toFixed(3)
      } else if (type === Date) {
        return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss')
      }
      return value
    }
  }
}
</script>
<style></style>
